Latviešu

Uzziniet, kā izmantot React pielāgotās funkcijas (hooks), lai izvilktu un atkārtoti izmantotu komponentu loģiku, uzlabojot koda uzturamību, testējamību un kopējo lietojumprogrammas arhitektūru.

React pielāgotās funkcijas (Hooks): Komponentu loģikas izvilkšana atkārtotai izmantošanai

React funkcijas ir revolucionējušas veidu, kā mēs rakstām React komponentus, piedāvājot elegantāku un efektīvāku veidu, kā pārvaldīt stāvokli un blakusefektus. Starp dažādajām pieejamajām funkcijām, pielāgotās funkcijas izceļas kā spēcīgs rīks komponentu loģikas izvilkšanai un atkārtotai izmantošanai. Šis raksts sniedz visaptverošu ceļvedi, lai izprastu un ieviestu React pielāgotās funkcijas, dodot jums iespēju veidot vieglāk uzturamas, testējamas un mērogojamas lietojumprogrammas.

Kas ir React pielāgotās funkcijas (Custom Hooks)?

Būtībā pielāgotā funkcija ir JavaScript funkcija, kuras nosaukums sākas ar "use" un kas var izsaukt citas funkcijas. Tā ļauj jums izvilkt komponentu loģiku atkārtoti izmantojamās funkcijās, tādējādi novēršot koda dublēšanos un veicinot tīrāku komponentu struktūru. Atšķirībā no parastajiem React komponentiem, pielāgotās funkcijas neatveido nekādu lietotāja interfeisu; tās vienkārši inkapsulē loģiku.

Uztveriet tās kā atkārtoti izmantojamas funkcijas, kas var piekļūt React stāvokļa un dzīves cikla funkcijām. Tās ir fantastisks veids, kā koplietot stāvokļa loģiku starp dažādiem komponentiem, neizmantojot augstākas kārtas komponentus vai render props, kas bieži vien var padarīt kodu grūti lasāmu un uzturamu.

Kāpēc izmantot pielāgotās funkcijas?

Pielāgoto funkciju izmantošanas priekšrocības ir daudzas:

Pirmās pielāgotās funkcijas izveide

Ilustrēsim pielāgotās funkcijas izveidi un lietošanu ar praktisku piemēru: datu iegūšanu no API.

Piemērs: useFetch - Datu iegūšanas funkcija

Iedomājieties, ka jūsu React lietojumprogrammā bieži jāiegūst dati no dažādām API. Tā vietā, lai atkārtotu datu iegūšanas loģiku katrā komponentā, varat izveidot useFetch funkciju.


import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url, { signal: signal });
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setError(null); // Clear any previous errors
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          setError(error);
        }
        setData(null); // Clear any previous data
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      abortController.abort(); // Cleanup function to abort the fetch on unmount or URL change
    };
  }, [url]); // Re-run effect when the URL changes

  return { data, loading, error };
}

export default useFetch;

Paskaidrojums:

Funkcijas useFetch izmantošana komponentā

Tagad redzēsim, kā izmantot šo pielāgoto funkciju React komponentā:


import React from 'react';
import useFetch from './useFetch';

function UserList() {
  const { data: users, loading, error } = useFetch('https://jsonplaceholder.typicode.com/users');

  if (loading) return <p>Loading users...</p>;
  if (error) return <p>Error: {error.message}</p>;
  if (!users) return <p>No users found.</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name} ({user.email})</li>
      ))}
    </ul>
  );
}

export default UserList;

Paskaidrojums:

Papildu pielāgoto funkciju modeļi

Papildus vienkāršai datu iegūšanai, pielāgotās funkcijas var izmantot, lai inkapsulētu sarežģītāku loģiku. Šeit ir daži papildu modeļi:

1. Stāvokļa pārvaldība ar useReducer

Sarežģītākiem stāvokļa pārvaldības scenārijiem varat apvienot pielāgotās funkcijas ar useReducer. Tas ļauj jums pārvaldīt stāvokļa pārejas paredzamākā un organizētākā veidā.


import { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function useCounter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement' });

  return { count: state.count, increment, decrement };
}

export default useCounter;

Lietošana:


import React from 'react';
import useCounter from './useCounter';

function Counter() {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

2. Konteksta integrācija ar useContext

Pielāgotās funkcijas var izmantot arī, lai vienkāršotu piekļuvi React Context. Tā vietā, lai izmantotu useContext tieši jūsu komponentos, varat izveidot pielāgotu funkciju, kas inkapsulē konteksta piekļuves loģiku.


import { useContext } from 'react';
import { ThemeContext } from './ThemeContext'; // Assuming you have a ThemeContext

function useTheme() {
  return useContext(ThemeContext);
}

export default useTheme;

Lietošana:


import React from 'react';
import useTheme from './useTheme';

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div style={{ backgroundColor: theme.background, color: theme.color }}>
      <p>This is my component.</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default MyComponent;

3. Debounce un Throttle

Debouncing un throttling ir tehnikas, ko izmanto, lai kontrolētu funkcijas izpildes ātrumu. Pielāgotās funkcijas var izmantot, lai inkapsulētu šo loģiku, tādējādi atvieglojot šo tehniku pielietošanu notikumu apstrādātājiem.


import { useState, useEffect, useRef } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

Lietošana:


import React, { useState } from 'react';
import useDebounce from './useDebounce';

function SearchInput() {
  const [searchValue, setSearchValue] = useState('');
  const debouncedSearchValue = useDebounce(searchValue, 500); // Debounce for 500ms

  useEffect(() => {
    // Perform search with debouncedSearchValue
    console.log('Searching for:', debouncedSearchValue);
    // Replace console.log with your actual search logic
  }, [debouncedSearchValue]);

  const handleChange = (event) => {
    setSearchValue(event.target.value);
  };

  return (
    <input
      type="text"
      value={searchValue}
      onChange={handleChange}
      placeholder="Search..."
    />
  );
}

export default SearchInput;

Labākā prakse pielāgoto funkciju rakstīšanā

Lai nodrošinātu, ka jūsu pielāgotās funkcijas ir efektīvas un uzturamas, ievērojiet šīs labākās prakses:

Globāli apsvērumi

Izstrādājot lietojumprogrammas globālai auditorijai, paturiet prātā sekojošo:

Piemērs: Internacionalizēta datuma formatēšana ar pielāgotu funkciju


import { useState, useEffect } from 'react';
import { DateTimeFormat } from 'intl';

function useFormattedDate(date, locale) {
  const [formattedDate, setFormattedDate] = useState('');

  useEffect(() => {
    try {
      const formatter = new DateTimeFormat(locale, {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      });
      setFormattedDate(formatter.format(date));
    } catch (error) {
      console.error('Error formatting date:', error);
      setFormattedDate('Invalid Date');
    }
  }, [date, locale]);

  return formattedDate;
}

export default useFormattedDate;

Lietošana:


import React from 'react';
import useFormattedDate from './useFormattedDate';

function MyComponent() {
  const today = new Date();
  const enDate = useFormattedDate(today, 'en-US');
  const frDate = useFormattedDate(today, 'fr-FR');
  const deDate = useFormattedDate(today, 'de-DE');

  return (
    <div>
      <p>US Date: {enDate}</p>
      <p>French Date: {frDate}</p>
      <p>German Date: {deDate}</p>
    </div>
  );
}

export default MyComponent;

Secinājums

React pielāgotās funkcijas ir spēcīgs mehānisms komponentu loģikas izvilkšanai un atkārtotai izmantošanai. Izmantojot pielāgotās funkcijas, jūs varat rakstīt tīrāku, vieglāk uzturamu un testējamu kodu. Kļūstot prasmīgākiem ar React, pielāgoto funkciju apgūšana ievērojami uzlabos jūsu spēju veidot sarežģītas un mērogojamas lietojumprogrammas. Atcerieties ievērot labāko praksi un ņemt vērā globālos faktorus, izstrādājot pielāgotās funkcijas, lai nodrošinātu to efektivitāti un pieejamību daudzveidīgai auditorijai. Izmantojiet pielāgoto funkciju spēku un uzlabojiet savas React izstrādes prasmes!